HTML इनपुट प्रकार
यह अध्याय HTML <इनपुट> तत्व के विभिन्न प्रकारों का वर्णन करता है।
सहायता नोट:
प्रकार विशेषता का डिफ़ॉल्ट मान "पाठ" है।
विभिन्न इनपुट प्रकार जिनका उपयोग HTML में किया जा सकता है:
इनपुट प्रकार: टेक्स्ट
<इनपुट प्रकार = "टेक्स्ट"> एकल-पंक्ति टेक्स्ट इनपुट फ़ील्ड को परिभाषित करता है:
उदाहरण
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
इनपुट प्रकार: पासवर्ड
<इनपुट प्रकार = "पासवर्ड"> एक पासवर्ड फ़ील्ड को परिभाषित करता है:
उदाहरण
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
पासवर्ड फ़ील्ड में अक्षर छिपे हुए हैं (सितारों या वृत्तों के रूप में दिखाए गए हैं)।
इनपुट प्रकार: सबमिट करें
<इनपुट प्रकार = "सबमिट"> एक्शन-हैंडलर को एक्शन डेटा सबमिट करने के लिए एक बटन को परिभाषित करता है।
स्टेप-हैंडलर आमतौर पर एक सर्वर पेज होता है जिसमें इनपुट डेटा को संसाधित करने के लिए एक स्क्रिप्ट होती है।
एक्शन-हैंडलर को एक्शन की एक्शन विशेषता में निर्दिष्ट किया गया है:
उदाहरण
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
यदि आप सबमिट बटन की वैल्यू विशेषता को छोड़ देते हैं, तो बटन में एक डिफ़ॉल्ट टेक्स्ट होगा:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit">
</form>
इनपुट प्रकार: रीसेट करें
<इनपुट प्रकार = "रीसेट"> एक रीसेट बटन को परिभाषित करता है जो सभी चरण मानों को उनके डिफ़ॉल्ट मानों पर रीसेट करता है:
उदाहरण
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
नोट:
यदि आप इनपुट मान बदलते हैं और "रीसेट" बटन पर क्लिक करते हैं, तो चरण-डेटा डिफ़ॉल्ट मानों पर रीसेट हो जाएगा।
इनपुट प्रकार: रेडियो
<इनपुट प्रकार = "रेडियो"> एक रेडियो बटन को परिभाषित करता है।
रेडियो बटन उपयोगकर्ता को सीमित संख्या में विकल्पों में से केवल एक का चयन करने की अनुमति देते हैं:
उदाहरण
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
Choose your favorite Web language:
इनपुट प्रकार: चेकबॉक्स
<इनपुट प्रकार = "चेकबॉक्स"> एक चेकबॉक्स को परिभाषित करता है।
चेक बॉक्स उपयोगकर्ता को सीमित संख्या में विकल्पों में से शून्य या अधिक विकल्प चुनने की अनुमति देते हैं।
उदाहरण
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
इनपुट प्रकार: बटन
<इनपुट प्रकार = "बटन"> एक बटन को परिभाषित करता है:
उदाहरण
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
अन्य इनपुट प्रकार
type="color"
रंग का चयन करने के लिए उपयोग किया जाता है
<input type="color" id="favcolor" name="favcolor">
type="date"
दिनांक का चयन करने के लिए उपयोग किया जाता है
<input type="date" id="birthday" name="birthday">
type="email"
ईमेल पतों के लिए उपयोग किया जाता है
<input type="email" id="email" name="email">
type="file"
फ़ाइल अपलोड के लिए उपयोग किया जाता है
<input type="file" id="myfile" name="myfile">
type="number"
संख्यात्मक मानों के लिए उपयोग किया जाता है
<input type="number" id="quantity" name="quantity" min="1" max="5">
type="range"
स्लाइडर नियंत्रण के लिए उपयोग किया जाता है
<input type="range" id="vol" name="vol" min="0" max="50">
type="search"
खोज फ़ील्ड के लिए उपयोग किया जाता है
<input type="search" id="gsearch" name="gsearch">
type="tel"
फ़ोन नंबरों के लिए उपयोग किया जाता है
<input type="tel" id="phone" name="phone">
इनपुट नियंत्रण
यहां कुछ सामान्य इनपुट नियंत्रणों की सूची दी गई है:
| गुण | व्याख्या |
|---|---|
| checked | निर्दिष्ट करता है कि पृष्ठ लोड होने पर एक इनपुट फ़ील्ड पूर्व-चयनित होना चाहिए (प्रकार = "चेकबॉक्स" या प्रकार = "रेडियो" के लिए)। |
| disabled | निर्दिष्ट करता है कि एक इनपुट फ़ील्ड अक्षम किया जाना चाहिए |
| max | किसी इनपुट फ़ील्ड के लिए अधिकतम मान निर्दिष्ट करता है |
| maxlength | किसी इनपुट फ़ील्ड के लिए वर्णों की अधिकतम संख्या निर्दिष्ट करता है |
| min | किसी इनपुट फ़ील्ड के लिए न्यूनतम मान निर्दिष्ट करता है |
| pattern | नियमित अभिव्यक्ति निर्दिष्ट करता है |
| readonly | निर्दिष्ट करता है कि एक इनपुट फ़ील्ड चरण-केवल (बदला हुआ) है। |
| required | इंगित करता है कि एक इनपुट फ़ील्ड आवश्यक है (भरने के लिए)। |
| size | किसी इनपुट फ़ील्ड की चौड़ाई (वर्णों में) निर्दिष्ट करता है |
| step | किसी इनपुट फ़ील्ड के लिए कानूनी संख्यात्मक अंतराल निर्दिष्ट करता है |
| value | किसी इनपुट फ़ील्ड के लिए डिफ़ॉल्ट मान निर्दिष्ट करता है |
अतिरिक्त शिक्षा:
आप अगले अध्याय में इनपुट नियंत्रण के बारे में अधिक जानेंगे।
उदाहरण
निम्नलिखित उदाहरण में आप 10 के चरणों में 0 से 100 तक का मान दर्ज कर सकते हैं। डिफ़ॉल्ट मान 30 है:
<form>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form>
अभ्यास
INPUT तत्व में प्रकार विशेषता का डिफ़ॉल्ट मान क्या है?
HTML इनपुट प्रकार विशेषता
| टैग | व्याख्या |
|---|---|
| <input type=""> | प्रदर्शित करने के लिए इनपुट का प्रकार निर्दिष्ट करता है |
महत्वपूर्ण बिंदु:
- प्रकार विशेषता इनपुट नियंत्रण के प्रकार को निर्धारित करती है
- डिफ़ॉल्ट मान "पाठ" है.
- विभिन्न प्रकार के मान अलग-अलग इनपुट बाधाएँ पैदा करते हैं
- प्रत्येक प्रकार का मान विशिष्ट उपयोग के मामलों के लिए उपयुक्त है